<!--04多自由度受载滚动轴承载荷分析-->
<template>
<div style="width: 100%;height: 100%;overflow-x:hidden;overflow-y:auto">
  <div style="margin-left: 2.5%;margin-right: 2.5%;" class="title">
    <label>载荷输入参数</label>
  </div>

  <div class="box1">
  <div style="display: flex;margin-top: 5px;">
    <div style="margin-left: 10%;">
      <label>轴承类型</label>
    </div>
    <div style="margin-left: 1%;">
      <select v-model="this.input.bearing_type">
        <option value="1" checked="checked">球轴承</option>
        <option value="2">棒轴承</option>
      </select>
    </div>
    <div style="margin-left: 10%;">
<!--      <button @click="showModal">导入excel数据</button>-->
      <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest">
        <button>导入excel数据</button>
        <span style="margin-left: 20px">注：导入文件格式为.xsl或.xlsx,其各列参数如下5张表所示(无需表头)，共计10列。</span>
      </a-upload>
    </div>
  </div>
  <div style="display: flex;margin-top: 5px;">
    <div style="width: 20%;text-align: center;">
      <label class="fence_control">输入端沿X轴径向力Fx</label>
    </div>
    <div style="width: 20%;text-align: center;">
      <label class="fence_control">输入端沿Y轴径向力Fy</label>
    </div>
    <div style="width: 20%;text-align: center;">
      <label class="fence_control">输入端沿Z轴径向力Fz</label>
    </div>
    <div style="width: 20%;text-align: center;">
      <label class="fence_control">输入端沿X轴弯矩Mx</label>
    </div>
    <div style="width: 20%;text-align: center;">
      <label class="fence_control">输入端沿Y轴弯矩My</label>
    </div>
  </div>
  <div style="display: flex;margin-top: 5px;margin-left: 5px;margin-right: 5px;height: 100%;">
    <div class="box2">
      <table style="overflow-y:auto;">
        <tr>
          <th style="width: 30%;">Fx(kN)</th>
          <th style="width: 30%;">循环次数</th>
        </tr>
        <tr v-for="(item , index) in this.input2.item" :key="index">
          <td v-if="index <= item.length">{{ item[0] }}</td>
          <td v-if="index <= item.length">{{ item[1] }}</td>
        </tr>
      </table>
    </div>
    <div class="box2">
      <table>
        <tr>
          <th style="width: 30%;">Fy(kN)</th>
          <th style="width: 30%;">循环次数</th>
        </tr>
        <tr v-for="(item , index) in this.input2.item" :key="index">
          <td v-if="index <= item.length">{{ item[2] }}</td>
          <td v-if="index <= item.length">{{ item[3] }}</td>
        </tr>
      </table>
    </div>
    <div class="box2">
      <table>
        <tr>
          <th style="width: 30%;">Fz(kN)</th>
          <th style="width: 30%;">循环次数</th>
        </tr>
        <tr v-for="(item , index) in this.input2.item" :key="index">
          <td v-if="index <= item.length">{{ item[4] }}</td>
          <td v-if="index <= item.length">{{ item[5] }}</td>
        </tr>
      </table>
    </div>
    <div class="box2">
      <table>
        <tr>
          <th style="width: 30%;">Mx(kNm)</th>
          <th style="width: 30%;">循环次数</th>
        </tr>
        <tr v-for="(item , index) in this.input2.item" :key="index">
          <td v-if="index <= item.length">{{ item[6] }}</td>
          <td v-if="index <= item.length">{{ item[7] }}</td>
        </tr>
      </table>
    </div>
    <div class="box2">
      <table>
        <tr>
          <th style="width: 30%;">My(kNm)</th>
          <th style="width: 30%;">循环次数</th>
        </tr>
        <tr v-for="(item , index) in this.input2.item" :key="index">
          <td v-if="index <= item.length">{{ item[8] }}</td>
          <td v-if="index <= item.length">{{ item[9] }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>
  <div style="display: flex;height: 40%;margin-top: 3px;">
    <div style="width: 65%;margin-left: 2.5%;">
      <div style="margin-left: 60%;">
        <button style="width: 25%;" class="fence_control" @click="m">计算</button>
      </div>
      <div class="title">
        <label>载荷输出参数</label>
      </div>
      <div class="box3">
        <div class="box5" style="overflow: scroll">
          <table>
            <tr>
              <th>序列</th>
              <th>沿X轴当量径向力</th>
              <th>沿Y轴当量径向力</th>
              <th>沿Z轴当量径向力</th>
              <th>沿X轴当量弯矩</th>
              <th>沿Y轴当量弯矩</th>
            </tr>
          </table>
            <tr v-for="(item,index3) in ans.synthesis_load_bearing" :key="index3">
              <td>{{item[0]}}</td>
              <td>{{item[1]}}</td>
              <td>{{item[2]}}</td>
              <td>{{item[3]}}</td>
              <td>{{item[4]}}</td>
              <td>{{item[5]}}</td>
            </tr>
        </div>
        <div style="margin-left: 20%;">
          <label>注:力的单位为kN;弯矩单位为kNm。</label>
        </div>
      </div>
    </div>
    <div style="width: 30%;margin-right: 2.5%;">
      <div class="title">
        参考图片
      </div>
      <div class="box4">
        <img :src="img" alt="C" style="width: 100%;height: 100%;"/>
      </div>

    </div>
  </div>
</div>
</template>

<script>


import {firedelete, firetext, m1} from "@/api/file";

export default {
  created () {
    document.title = '多自由度受载滚动轴承载荷分析' //模块中文名
    this.$store.state.file.key = 4 //设置key为自己的页面编号
  },
name: "Mutiaxes_Load_Bearing",
  data(){
    return{
      input2:{
        item:[[]],
      },
      form2:{
        uuids:[]
      },
      input:this.$store.state.file.dataList[4],
      ans:{
        synthesis_load_bearing:[[]],
      },
      visible: false,
      img:require("@/assets/image/img_04_1.jpg"),
      form1:{
        el:''
      }
    }
  },
  mounted(){
    //绑定页面退出事件
    window.onbeforeunload= (e)=>{
      e = e || window.event;
      if (e) {
        e.returnValue = '关闭提示';
      }
      this.delete()//调用自己的方法
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示';
    };
  },
  methods: {
    //同步请求删除载荷谱数组的方法
    async delete(){
      // await axios.get("http://localhost:7001/hellow").then(res => {
      // })
      this.form2.uuids=this.form2.uuids.toString();//将载荷谱文件数组转成字符串
      await firedelete(this.form2).then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
        console.log(res);
      })
    },
    customRequest (data){
    const formData = new FormData()
    formData.append('fileName' , data.file)
    firetext (formData)
       .then(res=> {//这里 需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
            console.log(res)
            this.input2.item=res.data.filedata;
            console.log(this.input2.item)
            this.input.uuid=res.data.uuid;
            this.form2.uuids.push(res.data.uuid);
     })
       .catch(error=> {
          console.log(error);
      });
     },
    m(){
      if(this.input.uuid=="")
        this.$message.warning("请先导入execl数据")
      else{
      m1(this.input)
          .then(res=>{
            console.log(res);
            this.ans=res;
          })
          .catch(error=>{
            console.log(error);
          });
       }
      },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    handleChange(info) {
      const status = info.file.status;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
}
</script>

<style scoped>
/*input{
  border: none;
  text-align: center;
  width: 50%;

}*/
*{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box1{
  height: 50%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box2{
  width: 20%;
  height: 75%;
  margin-right: 2px;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
  overflow-y: scroll;
}
.box3{
  width: 100%;
  height: 91%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box4{
  width: 90%;
  height: 100%;
  margin-left: 15px;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box5{
  width: 99%;
  height: 92%;
  margin-left: 5px;
  margin-top: 5px;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
select{
  width: 85px;
  height: 25px;
  text-align-last: center;
}
.fence_control{
  white-space: nowrap;
}
tr:nth-child(2n+1){
  background-color: rgb(239,239,239);
}
td,th{
  width: 60px;
  text-align: center;
}
tr{
  /*  width: 200px;*/
  height: 25px;
  text-align: center;
}
.box5 td{
  width: 120px;
  text-align: center;
}
.box5 th{
  width: 120px;
  text-align: center;
}
.div_right_up {
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.title {
  font-size: 17.5px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 3%;
  font-weight: bolder;
}
button{
  background-color: #6DD400;
  border-radius: 4px;
  border: 2px #686868;
}

</style>